<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-center-center under-line") ----菜单设置----
            div(class="flex-column-item flex-row",
            v-for="(item,index) in items",
            :class="{'selected-text': index == currentItemIndex ? true: false}")
                div(class="flex-row-item") {{item.name}}
                div(class="flex-row-ietm") {{item.value.name}}
        control-select(v-model="currentItem",:visible="visible",ref="selector",v-if="!currentItem.isControlAmount")
        control-amount(v-model="currentItem",:visible="visible",ref="amountControl",v-else)
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          name: "1.参数锁定",
          value: window.advance.parameterLocking,
          options: [{ name: "关", value: false }, { name: "开", value: true }],
          onChange(model) {
            window.advance.parameterLocking = model.value;
          }
        },
        {
          name: "2.三餐模式:",
          value: window.advance.threeMealMode,
          options: [{ name: "关", value: false }, { name: "开", value: true }],
          onChange(model) {
            window.advance.threeMealMode = model.value;
          }
        },
        {
          name: "3.按键锁定:",
          value: window.advance.keyLocking,
          options: [
            { name: "自动", value: false },
            { name: "手动", value: true }
          ],
          onChange(model) {
            window.advance.keyLocking = model.value;
          }
        }
      ],
      visible: false,
      currentItem: null,
      currentItemIndex: 0
    };
  },
  computed: {},
  methods: {
    up() {
      if (this.visible) {
        var ref = this.currentItem.isControlAmount
          ? this.$refs.amountControl
          : this.$refs.selector;
        ref.up();
        return;
      }

      this.currentItemIndex =
        this.currentItemIndex == 0 ? 2 : this.currentItemIndex - 1;
      this.currentItem = this.items[this.currentItemIndex];
    },
    down() {
      if (this.visible) {
        var ref = this.currentItem.isControlAmount
          ? this.$refs.amountControl
          : this.$refs.selector;
        ref.down();
        return;
      }

      this.currentItemIndex =
        this.currentItemIndex == 2 ? 0 : this.currentItemIndex + 1;
      this.currentItem = this.items[this.currentItemIndex];
    },

    back() {
      if (this.visible) {
        this.visible = !this.visible;
      } else {
        this.$router.push("/advance-setting?index=2");
      }
    },
    yes() {
      this.visible = !this.visible;
    }
  },
  created() {
    this.currentItem = this.items[0];
  }
};
</script>

<style lang="less">
</style>
